<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	template="template.xhtml">

	<ui:define name="content">

		<h:outputStylesheet target="head" library="css" name="no_border.css" />

		<h1>Advanced Search</h1>

		<h:form id="form">

			<p:growl id="messages" showDetail="true" life="3000" />

			<p:panel header="Search Parameters" name="searchPanel">
				<p:panelGrid name="searchParameters">
					<p:row>
						<p:messages />
						<p:column style="width:60%">
							<p:panelGrid name="searchPanel" columns="2" style="width:100%">

								<p:outputLabel for="country" value="Country" />
								<p:autoComplete style="width:100%" id="country"
									value="#{searchBean.country}" forceSelection="true"
									completeMethod="#{searchBean.completeCountry}" global="false" />

								<p:outputLabel for="city" value="City" />
								<p:autoComplete style="width:100%" id="city"
									value="#{searchBean.city}" forceSelection="true"
									completeMethod="#{searchBean.completeCity}" global="false" />

								<p:outputLabel for="placeName" value="Place Name:" />
								<p:inputText style="width:100%" id="placeName"
									label="Place Name" value="#{searchBean.placeName}">
								</p:inputText>

								<p:outputLabel for="selectedTags" value="Tags:" />
								<p:autoComplete id="selectedTags"
									value="#{searchBean.selectedTags}"
									completeMethod="#{searchBean.completeTags}" var="t"
									itemLabel="#{t}" itemValue="#{t}" converter="tagConverter"
									multiple="true" global="false" />

								<p:outputLabel for="fromDate" value="From Date:" />
								<p:calendar id="fromDate" style="width:100%"
									value="#{searchBean.fromDate}" navigator="true"
									display="inline" effect="slideDown" />

								<p:outputLabel for="toDate" value="To Date:" />
								<p:calendar id="toDate" style="width:100%"
									value="#{searchBean.toDate}" navigator="true" display="inline"
									effect="slideDown" />

							</p:panelGrid>

							<p:commandButton value="Search" icon="ui-icon-check"
								style="margin:10px 0" action="#{searchBean.search}"
								update="results mapId messages"/>

						</p:column>
						<p:column style="width:40%">
							<p:gmap center="41.08545, 29.04450" zoom="17" type="HYBRID"
								id="mapId" widgetVar="gmap" style="width:550px;height:400px"
								model="#{searchBean.map}" fitBounds="true">

								<p:ajax event="stateChange"
									listener="#{searchBean.onStateChange}" global="false" />

								<p:ajax event="overlaySelect"
									listener="#{searchBean.onMarkerSelect}" global="false" />

								<p:gmapInfoWindow>
									<p:outputPanel
										style="text-align:center;display:block;margin:auto:">
										<h:outputText value="#{searchBean.marker.title}" />
									</p:outputPanel>
								</p:gmapInfoWindow>
							</p:gmap>

							<br />

							<h:outputText for="restrictToMap"
								value="Restrict resuts to map area: " style="font-weight:bold" />
							<p:selectBooleanCheckbox id="restrictToMap"
								value="#{searchBean.restrictToCurrentMap}" />

						</p:column>
					</p:row>
				</p:panelGrid>
			</p:panel>

			<p:panel header="Search Results">
				<p:dataTable id="results" value="#{searchBean.searchResults}"
					var="p" styleClass="table table-striped" paginator="true" rows="10"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="5,10,15">
					<p:columnGroup type="header">
						<p:row>
							<p:column headerText="Details" />
							<p:column headerText="Place Name" />
							<p:column headerText="Country" />
							<p:column headerText="City" />
							<p:column headerText="Tags" />
							<p:column headerText="Date" />
							<p:column colspan="2" headerText="Like" />
						</p:row>

					</p:columnGroup>

					<p:column style="width:8%">
						<p:commandButton id="detailsButton" title="Details" value="View"
							action="#{searchBean.viewDetails(p)}" global="false">
							<f:setPropertyActionListener value="#{p}"
								target="#{searchBean.selectedPlace}" />
						</p:commandButton>
					</p:column>

					<p:column>
						<h:outputText value="#{p.placeName}" />
					</p:column>


					<p:column>
						<h:outputText value="#{p.country}" />
					</p:column>

					<p:column>
						<h:outputText value="#{p.city}" />
					</p:column>

					<p:column>
						<h:outputText value="#{p.CSVTags}" />
					</p:column>

					<p:column style="width:12%">
						<h:outputText value="#{p.day}" />
					</p:column>

					<p:column style="width:4%">
						<h:outputText value="#{p.likeCount}" />
					</p:column>

					<p:column style="width:4%">

						<p:commandButton rendered="#{searchBean.isLoggedIn()}"
							id="likeButton" update="results" title="Like"
							disabled="#{searchBean.isLiked(p)}" icon="ui-icon-heart"
							action="#{searchBean.likePlace(p)}" />
						<!--//increment like countu degistr-->

					</p:column>


				</p:dataTable>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>
